<template>
  <div class="add_item">
      <!-- 头部 -->
     <div class="item_top"><van-icon name="arrow-left" size=25px  class="icon"/><span class="top_item">体检加项</span></div>
     <!-- 标题 -->
     <div class="item_text">根据您选择的套餐，推荐您增加以下体检项目：</div>
     <!-- 内容 -->
     <div class="item_content">
         <div class="option1">
            <van-checkbox v-model="checked" shape="square" class="check1"></van-checkbox>
            <div class="create"><span class="title">肝功三项</span><br><span>￥60 ￥80 213 已有 人购买</span></div>
            <div class="particulars"><span class="string">|</span><span class="bor" style="color:green;" is-link @click="showPopup">详情</span></div>
         </div>
         <div class="option1">
            <van-checkbox v-model="checked" shape="square" class="check1"></van-checkbox>
            <div class="create"><span class="title">肝功三项</span><br><span>￥60 ￥80 213 已有 人购买</span></div>
            <div class="particulars"><span class="string">|</span><span class="bor" style="color:green;" is-link @click="showPopup">详情</span></div>
         </div>
         <div class="option1">
            <van-checkbox v-model="checked" shape="square" class="check1"></van-checkbox>
            <div class="create"><span class="title">肝功三项</span><br><span>￥60 ￥80 213 已有 人购买</span></div>
            <div class="particulars"><span class="string">|</span><span class="bor" style="color:green;" is-link @click="showPopup">详情</span></div>
         </div>
         <div class="option1">
            <van-checkbox v-model="checked" shape="square" class="check1"></van-checkbox>
            <div class="create"><span class="title">肝功三项</span><br><span>￥60 ￥80 213 已有 人购买</span></div>
            <div class="particulars"><span class="string">|</span><span class="bor" style="color:green;" is-link @click="showPopup">详情</span></div>
         </div>
         <div class="option1">
            <van-checkbox v-model="checked" shape="square" class="check1"></van-checkbox>
            <div class="create"><span class="title">肝功三项</span><br><span>￥60 ￥80 213 已有 人购买</span></div>
            <div class="particulars"><span class="string">|</span><span class="bor" style="color:green;" is-link @click="showPopup">详情</span></div>
         </div>
         <div class="option1">
            <van-checkbox v-model="checked" shape="square" class="check1"></van-checkbox>
            <div class="create"><span class="title">肝功三项</span><br><span>￥60 ￥80 213 已有 人购买</span></div>
            <div class="particulars"><span class="string">|</span><span class="bor" style="color:green;" is-link @click="showPopup">详情</span></div>
         </div>
         <div class="option1">
            <van-checkbox v-model="checked" shape="square" class="check1"></van-checkbox>
            <div class="create"><span class="title">肝功三项</span><br><span>￥60 ￥80 213 已有 人购买</span></div>
            <div class="particulars"><span class="string">|</span><span class="bor" style="color:green;" is-link @click="showPopup">详情</span></div>
         </div>
         <div class="option1">
            <van-checkbox v-model="checked" shape="square" class="check1"></van-checkbox>
            <div class="create"><span class="title">肝功三项</span><br><span>￥60 ￥80 213 已有 人购买</span></div>
            <div class="particulars"><span class="string">|</span><span class="bor" style="color:green;" is-link @click="showPopup">详情</span></div>
         </div>
     </div>
     <!-- 弹框 -->
     <van-popup v-model="show" class="pop-up">
         <div class="pop_top"><h2>脑补CT</h2></div>
         <div class="pop_content">
            <p>检查范围：</p> 
            <p>CT</p> 
            <p>检查意义：</p> 
            <p>检查脑部</p> 
           
         </div>
         <div class="pop_bottom"><span class="pop_bottom-but">关闭</span></div>
     </van-popup>
     <!-- 底部 -->
     <div class="item_bottom" >
         <div class="left"><van-button class="left-but" type="default" style="color:green">跳过</van-button></div>
         <div class="right"><van-button class="right-but" type="primary">确定</van-button></div>
     </div>
  </div>
</template>

<script>
export default {
    data() {
    return {
      checked: false,
      show: false,
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
  },
}
</script>

<style lang="scss">
.add_item{
    // 体检头部
    .item_top{
        width: 100%;
        height: 50px;
        // background-color: aqua;
        display: flex;
        text-align:center;
        // 体检项文字
            .top_item{
                display: block;
                padding-top: 10px;
                margin-left: 37%;
                }
        // 头部图标
            .icon{
                display:inline-block;
                 padding-top: 10px;
                }
         // 文字
        .item_text{
             margin-left: 10px;
         }
    }
    
   
    
    // 内容
    .item_content{
        padding-top: 6px;
        
        // 体检项
        .option1{
            display: flex;
            height: 60px;
            justify-content:space-between;
            border-bottom: 1px solid gray;
            // background-color: aqua;
            // 复选框
            .check1{
                line-height: 50px;
                margin-left: 7px;
            }
            // 中间内容
            .create{
                padding-top: 10px;
            }
            // 标题
            .title{
                padding-top: 10px;
            }
            // 详情
            .particulars{
                padding-top: 10px;
                
            }
            .bor{
                margin-right: 30px;
                
            }
            .string{
                font-size: 30px;
                margin-right: 20px;
            }
        }
    }
    .item_bottom{
        display: flex;
        margin-top: 43px;
        background-color: greenyellow;
        width: 100%;
           position: fixed;
            bottom: 0;
        
    }
    // 左边按钮
    .left{
        width: 45%;
        height: 60px;
        background-color: greenyellow;
        .left-but{
        border-top:1px solid green;
        height: 100%;
        width: 100%;
    }
    }
    
    // 右边按钮
    .right{
        
      height: 60xp;
      flex: 2;
      background-color: rgb(255, 47, 151);
      .right-but{
        height: 100%;
        width: 100%;
      }
    }
    // 弹框
    .pop-up{
        overflow: hidden;
        width: 300px;
        height: 300px;
        border-radius: 7%;
        
        // 头部
        .pop_top{
            width: 100%;
            height: 40px;
            border-bottom: 1px solid green;
        }
        // 头部标题
        .pop_top h2{
            text-align: center;
        }
        // 内容
        .pop_content{
            margin-left: 10px;
            height: 170px;
            border-bottom: 1px solid green;
        }
        // 底部
        .pop_bottom{
            
            .pop_bottom-but{
                display: block;
                text-align: center;
                margin-top: 17px;
                width: 100%;
                height: 40xp;
                color: green;
            }
        }
    }
}
</style>